<template>
  <el-dialog
    title="订单项"
    :close-on-click-modal="false"
    width="80%"
    :visible.sync="visible">
    <el-table
      :data="dataList"
      border
      v-loading="loading"
      style="width: 100%;"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="SPU ID">
              <span>{{ props.row.spuId }}</span>
            </el-form-item>
            <el-form-item label="SPU名称">
              <span>{{ props.row.spuName }}</span>
            </el-form-item>
            <el-form-item label="SPU图片">
              <el-image
                style="width: 100px; height: 100px"
                :src="props.row.spuPic"
                fit="contain"></el-image>
            </el-form-item>
            <el-form-item label="品牌 ID">
              <span>{{ props.row.spuBrand }}</span>
            </el-form-item>
            <el-form-item label="分类 ID">
              <span>{{ props.row.categoryId }}</span>
            </el-form-item>
            <el-form-item label="商品销售属性组合">
              <span>{{ props.row.skuAttrsVals }}</span>
            </el-form-item>
            <el-form-item label="商品促销金额">
              <span>￥{{ props.row.promotionAmount }}</span>
            </el-form-item>
            <el-form-item label="优惠券优惠金额">
              <span>￥{{ props.row.couponAmount }}</span>
            </el-form-item>
            <el-form-item label="积分优惠金额">
              <span>￥{{ props.row.integrationAmount }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="id" header-align="center" align="center" label="id" width="200"></el-table-column>
      <el-table-column prop="skuId" header-align="center" align="center" label="商品 id" width="200"></el-table-column>
      <el-table-column prop="skuName" header-align="center" align="center" label="商品名称"></el-table-column>
      <el-table-column prop="skuPic" header-align="center" align="center" label="商品图片" width="150">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.skuPic"
            fit="contain"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="skuPrice" header-align="center" align="center" label="商品价格" width="100"></el-table-column>
      <el-table-column prop="skuQuantity" header-align="center" align="center" label="商品数量" width="100"></el-table-column>
      <el-table-column prop="realAmount" header-align="center" align="center" label="最后价格" width="100"></el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { list } from '@/api/order/order-item'

  export default {
    data () {
      return {
        visible: false,
        loading: false,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
      }
    },
    methods: {
      init (id) {
        this.visible = true
        this.$nextTick(() => {
            this.loading = true
            list({
              'page': this.pageIndex,
              'limit': this.pageSize,
              'key': id
            })
              .then((data) => {
                this.dataList = data.page.list
                this.totalPage = data.page.totalCount
                this.loading = false
              }).catch(()=>{})
          })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      },
      renderTime(date) {
        const dateee = new Date(date).toJSON();
        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      }
    }
  }
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-left: 20px;
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
